<template>
  <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#FFFFFF" auto-play="3000">
    <nut-swiper-item v-for="(banner, index) in bannerList" :key="index">
      <img :src="banner.img" alt="" />
    </nut-swiper-item>
  </nut-swiper>
  <img class="index-img" src="https://cdn.krisli.cn/imgs/Rectangle%2046.png" alt="" srcset="">
</template>

<script setup>
import { ref } from 'vue';

const banner_config = [{
  img: 'https://cdn.krisli.cn/imgs/Rectangle%2043.png',
  link: 'https://www.baidu.com'
}, {
  img: 'https://cdn.krisli.cn/imgs/Rectangle%2044.png',
  link: 'https://www.baidu.com'
}, {
  img: 'https://cdn.krisli.cn/imgs/Rectangle%2045.png',
  link: 'https://www.baidu.com'
}]
const page = ref(2);
const bannerList = ref(banner_config)

</script>

<style lang="less">
.nut-swiper-item {
  height: 500px;
}

.nut-swiper-item img {
  width: 100%;
  height: 100%;
}

.index-img {
  width: 750px;
  height: 1600px;
}
</style>
